/**
* Created by tanyichao on 2017/4/10.
*/
<template>
    <div class="routerContent setTakeTimeContainer">
        <!--<x-header>取餐时间</x-header>-->
        <scroller  lock-x>
            <div class="setTakeTimeContent">
                <div class="setTakeTimeImg">
                    <img src="../assets/img/setTakeTimeBg.png" alt="">
                </div>
                <div class="setTakeTimeInfo">
                    <span class="chooseTime">选择取餐时间:</span>
                    <div class="info">
                        <div class="now" @click="goDining(1)"><span style="font-size:.9rem;font-weight:700;">现在</span>,支付成功后直接取餐</div>
                        <div class="after" @click="goDining(0)"><span style="font-size:.9rem;font-weight:700;">稍晚</span>,预约稍晚时间取餐</div>
                    </div>
                </div>
            </div>
        </scroller>
    </div>
</template>
<script>
    import {XHeader, Scroller} from 'vux'

    import {mapState, mapActions} from 'vuex'

    export default {
        components: {
            XHeader,
            Scroller
        },
        mounted(){

        },
        beforeCreate(){

        },
        watch: {},
        activated(){
            this.stStoreId = this.$route.query.stStoreId || '';
            this.path = this.$route.query.path || '';
            if(this.path == 'historyOrder'){
                this.$router.push({
                    name: 'historyOrder',
                    query: {
                    }
                })
            }
        },
        deactivated(){
            this.$destroy(true)
        },
        data(){
          return {
              stStoreId:''
          }
        },
        computed: {
            ...mapState({
                dineWay:state => dineWay.order.dineWay,
            }),
        },
        created(){
        },
        methods:{
            ...mapActions([
                'updateDineWay',
                'updateDiningModeType'
            ]),
            goDining(isShowTime){
                this.updateDineWay(isShowTime);
                if(isShowTime == 0){
                    this.updateDiningModeType(true);   //是否有稍后日期选择 true
                }else{
                    this.updateDiningModeType(false);
                }
                this.$router.push({
                    name: 'diningMode',
                    query: {
                        isShowTime: isShowTime,
                        stStoreId:this.stStoreId || ''
                    }
                })
            },
        },

    }
</script>
<style lang="less" rel="stylesheet/less">
    .setTakeTimeContent {
        width: 100%;
        height: auto;

        .setTakeTimeImg {
            img {
                width: 100%;
                height: auto;
            }
        }
        .setTakeTimeInfo {
            padding: 0.5rem;
            .chooseTime {
                display: inline-block;
                width: 100%;
                font-size: 0.75rem;
                padding-bottom: 0.75rem;
            }
            .info>div{
                width: 100%;
                height: 2.7rem;
                font-size: 0.8rem;
                color: #FC8672;
                border: 1px solid #FC8672;
                border-radius: 5px;
                text-align: center;
                line-height: 2.7rem;
                margin-bottom: 0.75rem;
            }
        }

    }
</style>
